// 当用户点击提交按钮时，执行以下操作
// 1. 获取用户输入内容
// 2. 将内容添加到 ul列表中

//  监听提交按钮的点击事件
// 获取 form表单元素
const form = document.querySelector('.form');
const input = document.querySelector('.form_input');
const ul = document.querySelector('.todo-list');

const toDoListArray = [];  // 存储待办事项的数组


form.addEventListener('submit', function (e) {  // 用户点击提交
  e.preventDefault();  // 阻止表单默认提交行为

  let itemId = String(Date.now());  // 生成一个唯一的 id
  let toDoItem = input.value;  // 获取用户输入的内容

  // 有一个函数，可以帮我把内容调价进数组
  // 再有一个函数，将数组进行渲染
  addItemToArray(itemId, toDoItem);
  addItemToDom(itemId, toDoItem);
})

function addItemToArray (id, item) {
  toDoListArray.push({
    itemId: id,
    todoItem: item
  })
}

function addItemToDom (id, item) {
  const li = document.createElement('li');
  li.textContent = item;
  li.setAttribute('data-id', id);
  ul.appendChild(li);
}

// 移除待办事项
ul.addEventListener('click', function(e) {
  console.log(e.target.getAttribute('data-id'));
  const id = e.target.getAttribute('data-id');
  removeItemFromArray(id);
  removeItemFromDom(id);

  // 点击 li 元素时，执行以下操作
  // 1. 获取到被点击的 li 元素，并且读取它的 data-id 属性
  // 2. 根据这个 id 从数组中删除对应的元素
  // 3. 从页面中删除对应的 li 元素  
  // 获取到被点击的 li 元素，并且读取它的 data-id 属性
  // 根据这个 id 从数组中删除对应的元素
  // 从页面中删除对应的 li 元素
  // 数组的 splice 方法可以实现这个功能 splice(索引，删除个数)
  // 数组的 findIndex 方法可以实现这个功能 findIndex(回调函数)
})


function removeItemFromArray (id) {
  // 找到数组中对应 id 的元素的索引
  // 根据索引删除数组中的元素
  // 数组的 splice 方法可以实现这个功能 splice(索引，删除个数)
  const index = toDoListArray.findIndex(function (item) {
    return item.itemId === id;
  })

  if (index !== -1) {  // 找到了对应的元素
    toDoListArray.splice(index, 1);  // 删除对应的元素
  }
  else {  // 没有找到对应的元素
    console.log('没有找到对应的元素');
  }
}

function removeItemFromDom (id) {
  // 根据 id 获取到对应的 li 元素
  // 从父元素中删除对应的 li 元素
  const li = document.querySelector(`[data-id="${id}"]`);
  if (li) {  // 如果找到了对应的 li 元素
    li.remove();  // 删除对应的 li 元素
  }
  else {  // 如果没有找到对应的 li 元素
    console.log('没有找到对应的 li 元素');
  }
}
